<template>
    <!-- 个人中心 -->
    <view class="page-container">
        <view class="alldiv">
            <!-- 头像名称描述区域 -->
            <view class="headsculpture">
                <!-- 头像区域 -->
                <view class="headdiv">
                    <image style="width: 60px; height: 60px; border-radius: 12px" :src="user.avatar == '' ? '/static/tabber/PersonalCenterdefault.png' : user.avatar" />
                </view>

                <!-- 用户区域 -->
                <view class="userdiv">
                    <view class="namediv">
                        <view style="display: flex; align-items: center">
                            <span style="font-size: 14px; padding-top: 80rpx; font-weight: bold; color: rgba(56, 56, 56, 1)">{{ user.nickname }}</span>
                        </view>
                    </view>
                    <view class="introducediv">
                        <view class="introdiv">
                            <!--							<span>{{ user.userName }}</span>-->
                        </view>
                    </view>
                </view>
            </view>

            <!-- 九宫格区域 -->
            <view class="calligraphydiv">
                <view class="gnlistqydiv" @click="Mygoobj">
                    <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="icon.goods" :size="44"></u-icon>
                    <text class="grid-text">{{ language.Personalcenter.ord }}</text>
                </view>
                <view class="gnlistqydiv" @click="Mygootwallet">
                    <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="icon.wallet" :size="44"></u-icon>
                    <text class="grid-text">{{ language.Personalcenter.qb }}</text>
                </view>
                <view class="gnlistqydiv" @click="Mygocoupon">
                    <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="icon.coupon" :size="44"></u-icon>
                    <text class="grid-text">{{ language.Personalcenter.yhj }}</text>
                </view>
                <view class="gnlistqydiv" @click="Mygosetup">
                    <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="icon.setup" :size="44"></u-icon>
                    <text class="grid-text">{{ language.Personalcenter.sz }}</text>
                </view>
            </view>

            <!-- 个人中心列表 -->
            <view class="grlist">
                <view class="glist">
                    <u-cell-group>
                        <u-cell isLink :title="language.Personalcenter.qxjl" @click="MygoCyclingrecords"></u-cell>
                        <u-cell isLink :title="language.Personalcenter.zdmx" @click="MygoBilldetails"></u-cell>
                    </u-cell-group>
                </view>
                <view class="glist">
                    <u-cell-group>
                        <u-cell isLink :title="language.Personalcenter.aqzx"></u-cell>
                        <u-cell isLink :title="language.Personalcenter.ssqb" @click="MygoReport"></u-cell>
                    </u-cell-group>
                </view>
                <view class="glist">
                    <u-cell-group>
                        <u-cell isLink :title="language.Personalcenter.cwsfcsj" @click="MygoBecomingaHitchhiker"></u-cell>
                        <u-cell isLink :title="language.Personalcenter.dpgl"></u-cell>
                        <u-cell isLink :title="language.Personalcenter.jmpt" @click="Mygojoin4s"></u-cell>
                        <u-cell isLink :title="language.Personalcenter.kf"></u-cell>
                    </u-cell-group>
                </view>
            </view>
        </view>
        <customTabbar :curr-page="4" :key="$store.state.internationalization.number" />
    </view>
</template>

<script>
import customTabbar from '../../wxcomponents/customTabbar.vue'
export default {
    components: {
        customTabbar
    },
    data() {
        return {
            user: {},
            language: {},
            // 图片
            url: 'https://img01.yzcdn.cn/vant/cat.jpeg',
            // icon
            icon: {
                // 订单
                goods: require('@/static/image/goods.png'),
                // 钱包
                wallet: require('@/static/image/wallet.png'),
                // 优惠卷
                coupon: require('@/static/image/coupon.png'),
                // 设置
                setup: require('@/static/image/setup.png')
            }
        }
    },
    onLoad() {
       this.user = uni.getStorageSync('USER_INFO')
       if (typeof this.user === 'object') {
           this.user = this.user
       } else {
           this.user = eval("("+this.user+")")
       }
        console.log(this.user)
        // console.log(this.$store.state.user.information)
        this.getlanguagedata()
        // this.loadmore();
    },
    onShow: function () {
        this.user = uni.getStorageSync('USER_INFO')
        if (typeof this.user === 'object') {
            this.user = this.user
        } else {
            this.user = eval("("+this.user+")")
        }
        this.getlanguagedata()
        console.log('Personalcenter Show')
    },
    onHide: function () {
        console.log('PersonalcenterApp Hide')
    },
    mounted() {
        this.user = uni.getStorageSync('USER_INFO')
        if (typeof this.user === 'object') {
            this.user = this.user
        } else {
            this.user = eval("("+this.user+")")
        }
        this.getlanguagedata()
    },
    methods: {
        getlanguagedata() {
            this.language = this.$store.getters['internationalization/getinternationalization']
        },
        // 去订单
        Mygoobj() {
            uni.navigateTo({
                url: '/pages/Orderforgoods/Orderforgoods'
            })
        },
        // 去钱包
        Mygootwallet() {
            uni.navigateTo({
                url: '/pages/Wallet/Wallet'
            })
        },
        // 去优惠卷
        Mygocoupon() {
            uni.navigateTo({
                url: '/pages/Coupon/Coupon'
            })
        },
        // 去设置
        Mygosetup() {
            uni.navigateTo({
                url: '/pages/Setup/Setup'
            })
        },
        // 骑行记录
        MygoCyclingrecords() {
            uni.navigateTo({
                url: '/pages/Cyclingrecords/Cyclingrecords'
            })
        },
        // 账单明细
        MygoBilldetails() {
            uni.navigateTo({
                url: '/pages/Billdetails/Billdetails'
            })
        },
        // 去申请举报
        MygoReport() {
            uni.navigateTo({
                url: '/pages/Report/Report'
            })
        },
        // 去成为顺风车司机
        MygoBecomingaHitchhiker() {
            uni.navigateTo({
                url: '/pages/BecomingaHitchhiker/BecomingaHitchhiker'
            })
        },
        //去加盟4s店
        Mygojoin4s() {
            uni.navigateTo({
                url: '/pages/join4s/join4s'
            })
        }
    }
}
</script>

<style lang="less" scoped>
.page-container {
    min-height: calc(100vh - 8vh);
    background-color: #fff;
}

.alldiv {
    // width: 100%;
    // height: 90vh;
    // overflow: auto;
    // 头像用户名区域样式
    .headsculpture {
        width: 100%;
        height: 322rpx;
        // height: 19.4%;
        background: linear-gradient(180deg, rgba(235, 255, 236, 1) 0%, rgba(220, 247, 242, 1) 52.77%, rgba(220, 247, 242, 0) 100%);
        display: flex;

        align-items: center;
        justify-content: center;

        // 头像区域样式
        .headdiv {
            // width: 25%;
            // height: 100%;

            width: 120rpx;
            height: 120rpx;

            // display: flex;
            // justify-content: flex-end;
            // align-items: center;
        }

        // 这个用户区域
        .userdiv {
            width: 70%;
            // height: 100%;
            margin-left: 16rpx;

            // 名称样式
            .namediv {
                width: 100%;
                height: 50%;
                display: flex;
                align-items: flex-end;
            }

            // 这个是介绍样式
            .introducediv {
                width: 100%;
                height: 50%;
                display: flex;
                align-items: flex-start;
                margin-top: 8rpx;

                .introdiv {
                    width: 100%;
                    height: 40px;
                    color: #ffffff;
                    font-size: 12px;
                    font-weight: 400;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: rgba(153, 153, 153, 1);
                }
            }
        }
    }

    // 九宫格样式
    .calligraphydiv {
        // width: 95%;
        margin: 0 32rpx;

        height: 15%;
        position: relative;
        bottom: 40rpx;
        // margin: auto;
        display: flex;
        // box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
        border-radius: 12rpx;
        background-color: #fff;
        height: 172rpx;

        .gnlistqydiv {
            width: 25%;
            height: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
    }

    // 个人中心列表
    .grlist {
        // width: 95%;
        padding: 0 32rpx;
        margin: auto;
        display: flex;
        flex-direction: column;

        .glist {
            width: 100%;
            // height: auto;
            // box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
            margin-bottom: 32rpx;
            // margin-top: 20px;
            // margin-bottom: 20px;
            border-radius: 12rpx;
            background-color: #fff;

            /deep/ .u-cell__body {
                height: 96rpx;
                display: flex;
                justify-content: center;
            }

            /deep/ .u-cell__title-text {
                color: rgba(51, 51, 51, 1);
            }
        }
    }
}

/deep/ .u-grid {
    height: 66px;
    width: 100 !important;
    box-sizing: border-box;
    display: flex;
    font-size: 12px;
    font-weight: bold;
    color: rgba(56, 56, 56, 1);
}
</style>
